<template>
  <div class="availableQuota">
    <div class="function ">
      <a-form @keyup.enter.native="searchQuery" >
        <a-form-item class="search_box_right">
          <a-input-search
            placeholder="资金流水号"
            v-model="queryParam.id"
            @search="searchQuery"
          />
        </a-form-item>
      </a-form>
    </div>
    <div class="total">
      已筛选
      <div class="blue">0</div>
      项 变动金额总计：
      <div class="black">￥0</div>
      &nbsp; &nbsp;
      <div class="blue">重置</div>
    </div>
    <!-- 配额总览 -->
    <a-table
      ref="table"
      size="middle"
      :scroll="{ x: true }"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      class="j-table-force-nowrap"
      @change="handleTableChange"
    >
      <span
        slot="tradeType"
        slot-scope="record"
        style="color: rgb(64, 158, 255)"
      >
        <span v-if="record.tradeType == 1">增加</span>
        <span v-else-if="record.tradeType == 2" style="color: rgb(226, 65, 86)"
          >减少</span
        >
      </span>
      <span slot="action" slot-scope="record">
        <a @click="handleEdit2(record)">编辑</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import { ListMixin } from "@/mixins/ListMixin";

export default {
  mixins: [ListMixin],
  data() {
    return {
      loading: false,
      size: "",
      url: {
        list: "/asset/transaction-record/list",
      },
      columns: [
        {
          title: "交易流水号",
          align: "center",
          dataIndex: "id",
        },

        {
          title: "产品类型",
          align: "center",
          dataIndex: "productType",
        },
        {
          title: "买方",
          align: "center",
          dataIndex: "buyer",
        },
        {
          title: "卖方",
          align: "center",
          dataIndex: "seller",
        },
        {
          title: "交易数量",
          align: "center",
          dataIndex: "volume",
        },
        {
          title: "交易类型",
          align: "center",
          scopedSlots: { customRender: "tradeType" },
        },
        {
          title: "成交单价(元/吨)",
          align: "center",
          dataIndex: "unitPrice",
        },

        {
          title: "交易金额",
          align: "center",
          sorter: true,
          dataIndex: "amount",
        },
        {
          title: "交易日期",
          align: "center",
          dataIndex: "tradingDate",
        },

        {
          title: "创建日期",
          align: "center",
          sorter: true,
          dataIndex: "createTime",
        },

        {
          title: "操作",
          align: "center",
          sorter: true,
          scopedSlots: { customRender: "action" },
        },
      ],
    };
  },
  mounted() {
    // transactionRecordList().then((res) => {
    //   //   console.log(res);
    //   this.record = res.result.records;
    // });
  },
  methods: {
    onSearch() {},
  },
};
</script>

<style lang="scss" scoped>
.availableQuota {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  .function {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    .ant-btn-primary {
      background: #0c67ee;
    }
    .btn {
      margin-right: 6px;
      font-size: 14px;
    }
  }
  .total {
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 1px solid #77d7ff;
    background: rgba(119, 215, 255, 0.1);
    border-radius: 4px;
    padding: 6px 20px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #2d303b;
    .blue {
      color: rgb(40, 120, 255);
    }
    .black {
      font-size: 16px;
      font-weight: 700;
      color: #2d303b;
    }
  }
  .name {
    font-size: 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    .anticon {
      font-size: 22px;
      margin-right: 6px;
    }
  }
  .val {
    font-size: 22px;
    margin-top: 2px;
    font-weight: 600;
  }
}
// 配额总览
.quotaOverview {
  background: url("@/assets/img/assets/bg_1.png");
  background-size: cover;
  padding: 20px;
  .quota {
    height: 80px;
    .top {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    .bg {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background: rgba(233, 237, 241, 0.2);
    }
    .title {
      font-size: 12px;
    }
    .h4 {
      font-size: 16px;
    }
    .val {
      margin-top: 6px;
      font-size: 12px;
    }
    .anticon {
      margin-right: 6px;
    }
  }
}
// 分配/交易
.distribution {
  display: flex;
  flex-direction: row;
  // width: 100%;
  padding: 0 20px;
  ul {
    padding: 0;
    width: 100%;
    margin-top: 10px;
    li {
      list-style: none;
      border-bottom: 1px solid #e7e7e7;
      padding: 10px 0px;
      display: flex;
      flex-direction: row;
      // justify-content: space-between;
      justify-content: flex-start;
      div {
        width: 50%;
        font-size: 12px;
      }
      .forecast {
        padding: 4px 10px;
        color: rgba(12, 103, 238, 0.5);
        margin-left: 10px;
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid rgba(12, 103, 238, 0.5);
        .anticon {
          margin-left: 6px;
          font-weight: 600;
          font-size: 16px;
          color: rgba(12, 103, 238, 0.5);
        }
      }
    }
  }
}
</style>